<template>
  <div class="element">
    <h1>使用Element组件</h1>
    <el-button @click="handleClick">显示隐藏</el-button>
    <el-button type="success">成功</el-button>
    <el-button type="primary">主要</el-button>
    <el-divider/>
  <!--响应式布局-->
  <el-row :gutter="10">
    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <transition name="el-fade-in-linear">
        <div v-show="show" class="transition-box">.el-fade-in-linear</div>
      </transition>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <transition name="el-zoom-in-top">
        <div v-show="show" class="transition-box">.el-zoom-in-top</div>
      </transition>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <transition name="el-zoom-in-bottom">
        <div v-show="show" class="transition-box">.el-zoom-in-bottom</div>
      </transition>
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      <transition name="el-fade-in">
        <div v-show="show" class="transition-box">.el-fade-in</div>
      </transition>
    </el-col>
  </el-row>
  </div>
</template>

<script>

export default {
  name: 'ElementView',
  data() {
    return {
      show: true
    }
  },
  methods: {
    handleClick() {
      this.show = !this.show;
    }
  }
}
</script>

<style scoped>
.transition-box {
    margin-bottom: 10px;
    width: 100%;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>
